<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<title>用户信息</title>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="static/layui/css/layui.css"  media="all">
  <style type="text/css">
    .layui-table{
      width: 50%;
      margin-left: 25%;
    }
  </style>
</head>
<body>
<br>
<div class="layui-btn-group demoTable" style="margin-bottom: 10px;">
</div>
<table class="layui-table" lay-data="{width: 1200, height:500, page:true, id:'idTest'}" lay-filter="demo">
  <thead>
  <tr>
    <th lay-data="{field:'id', width:100, sort: true}">编号 </th>
    <th lay-data="{field:'username', width:180, sort: true}">用户名</th>
    <th lay-data="{field:'password', width:180, sort: true}">密码</th>
    <th lay-data="{field:'sex', width:140}">手机号码</th>
    <th lay-data="{field:'job', width:100}">分属客户</th>
    <th lay-data="{fixed: 'right', width:300, align:'center', toolbar: '#barDemo'}">操作 </th>
  </tr>
  </thead>
  <tbody>
  <c:forEach items="${pList}" var="e">
    <tr>
      <td>${e.id}</td>
      <td>${e.username}</td>
      <td>${e.password}</td>
      <td>${e.phone}</td>
      <td>${e.customer_id}</td>
    </tr>
  </c:forEach>
  </tbody>
</table>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="static/layui/layui.js" charset="utf-8"></script>
<script>
  layui.use(['table','layer'], function(){
    var table = layui.table
            ,layer = layui.layer
            ,$ = layui.$;
    //监听工具条
    table.on('tool(demo)', function(obj){
      var data = obj.data;
      if(obj.event === 'del'){
        window.location.href="delP?id="+data.id+"";
      } else if(obj.event === 'edit'){
        window.location.href="toEditP?id="+data.id+"";
      }
    });
    var $ = layui.$, active = {
      checkname: function(){ //弹出对话框
        layer.prompt({title:'请输入名字的一部分'},function(value){
          window.location.href="hrefmohuname?username="+value+"";
        });
      }
    };
    $('.demoTable .layui-btn').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
  });

</script>
<script>
  layui.use('layer', function(){ //独立版的layer无需执行这一句
    var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

    //触发事件
    var active = {
      setTop: function(){
        var that = this;

      }
      ,confirmTrans: function(){
        //配置一个透明的询问框
        layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
          time: 20000, //20s后自动关闭
          btn: ['明白了', '知道了', '哦']
        });
      }
    }});
</script>
</script>


</body>
</html>